<template>
    <el-container>
        <el-main>
            <el-form ref="updateForm" :model="updateForm" :rules="rules" label-width="100px">
                <el-form-item label="案例标题" prop="title">
                    <el-input v-model="updateForm.title" />
                </el-form-item>
                <el-form-item label="案例详细" prop="info">
                    <el-input v-model="updateForm.info" type="textarea" :rows="20" placeholder="请输入案例详细" />
                </el-form-item>
                <el-form-item label="是否置顶">
                    <el-radio-group v-model="updateForm.isTop">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="已传图片" style="width: 1800px">
                    <ul class="el-upload-list el-upload-list--picture-card ">
                        <li class="el-upload-list__item is-ready" v-for="(item,index) in updateForm.images" v-bind:class="{choiced:isChoiced[index]}" :key="item.mu" :ref="item.mu">
                            <el-image class="el-upload-list__item-thumbnail picked" :src="item.url" fit="fill">
                                <template #error class="image-slot">
                                    <i class="el-icon-picture-outline" />
                                </template>
                            </el-image>
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePreview(item.url)">
                                    <i class="el-icon-zoom-in" />
                                </span>
                                <span class="el-upload-list__item-preview" @click="handleChoice(item.mu,index)">
                                    <i class="el-icon-thumb" />
                                </span>
                                <span class="el-upload-list__item-preview" @click="handleRemoveImage(item.mu)">
                                    <i class="el-icon-delete" />
                                </span>
                            </span>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="上传图片">
                    <CosUpload :clearFiles="clearFiles" @cosUploaded="handleCosUploaded" />
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="保存" :click="doUpdate" />
                </el-form-item>
            </el-form>
            <el-dialog :visible="dialogVisible">
                <img width="100%" :src="dialogImageUrl" />
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
import Data from '@/chaos/functions/common/Data';
import Show from '@/chaos/functions/common/Show';
import CosUpload from '@/app/components/CosUpload';
import { update, goBack } from '@/chaos/functions/mixin/pushcrud';

export default {
    name: 'UpdateCase',
    components: {
        CosUpload
    },
    mixins: [update, goBack],
    data() {
        const rules = {
            title: [
                { required: true, message: '请输入案例标题', trigger: 'blur' }
            ],
            info: [
                { required: true, message: '请输入案例详细', trigger: 'blur' }
            ]
        };
        return {
            domain: 'iya_case',
            indexPath: 'cases',
            rules,
            dialogImageUrl: '',
            dialogVisible: false,
            index: 1,
            clearFiles: false,
            isChoiced: [],
            choiceIndex: 1
        };
    },
    async created() {
        await this.showUpdate();
        const { imageMu, images } = this.updateForm;
        for (let index in images) {
            if (imageMu === images[index].mu) {
                this.$set(this.isChoiced, index, true);
                this.choiceIndex = index;
            }
        }
    },
    methods: {
        handleCosUploaded(url) {
            let that = this;
            let img = new Image();
            img.src = url;
            if (img.complete) {
                Show.success('上传成功');
                that.goAddImage(img.width, img.height, url);
            } else {
                img.onload = () => {
                    Show.success('上传成功');
                    that.goAddImage(img.width, img.height, url);
                };
            }
        },
        async goAddImage(width, height, url) {
            this.clearFiles = false;
            await Data.add('iya_case_image', {
                caseMu: this.updateForm.mu,
                doctorMu: this.updateForm.doctorMu,
                width,
                height,
                url
            });
            await this.showUpdate();
            this.clearFiles = true;
        },
        handlePreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
        handleRemoveImage(mu) {
            Data.remove('iya_case_image', mu, () => {
                this.showUpdate();
            });
        },
        handleChoice(mu, index) {
            if (index === this.choiceIndex) return;
            this.updateForm.imageMu = mu;
            this.$set(this.isChoiced, index, true);
            this.$set(this.isChoiced, this.choiceIndex, false);
            this.choiceIndex = index;
        }
    }
};
</script>
<style scoped>
.el-form {
    width: 800px;
}

.choiced {
    border: 5px #1989fa solid;
}
</style>

